import React, { useState } from 'react'
import './Comment.scss'

export default function Comment(props) {
  const [assist, setAssist] = useState(true)

  function changeAssist() {
    setAssist(!assist)
    
  }
  return (
    <div className='comment'>
      <div className='message'>评论 <span>（请勿在评论区里发表解题思路）</span></div>
      <div className='comment-box'>
        {
          props.list.map(item => {
            return <div className="comment-item" key={item.reid}>
              <div className="left">
                <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9405ba451a6ba9376fb4625f66b7cfc8264da4fdfb84120408dfc365e5d34c86" alt="" />
              </div>
              <div className="center">
                <div className='top'>卡路里<span>2023/02/12</span><span>上午9:21</span></div>
                <div className="user-comment">{item.comments}</div>
                <div className="bottom"><span>回复</span><i className={assist ? 'fa fa-thumbs-up' : 'fa fa-thumbs-up hand'} onClick={changeAssist}>{item.hot}</i></div>
              </div>

            </div>
          })
        }

      </div>
    </div>

  )
}
